<div class="login-container">

    <div class="row">

        <div class="col-sm-6">

            <script type="text/javascript">
                jQuery(document).ready(function ($) {
                    // Reveal Login form
                    setTimeout(function () {
                        $(".fade-in-effect").addClass('in');
                    }, 1);


                    // Validation and Ajax action
                    $("form#login").validate({
                        rules: {
                            email: {
                                required: true
                            },

                            passwd: {
                                required: true
                            }
                        },

                        messages: {
                            email: {
                                required: 'Please enter your email.'
                            },

                            passwd: {
                                required: 'Please enter your password.'
                            }
                        },

                        // Form Processing via AJAX
                        submitHandler: function (form) {
                            showLoadingBar(70); // Fill progress bar to 70% (just a given value)

                            var opts = {
                                "closeButton": true,
                                "debug": false,
                                "positionClass": "toast-top-full-width",
                                "onclick": null,
                                "showDuration": "300",
                                "hideDuration": "1000",
                                "timeOut": "5000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };

                            $.ajax({
                                url: "api/accounts/login/",
                                method: 'POST',
                                dataType: 'json',
                                data: {
                                    do_login: true,
                                    email: $(form).find('#email').val(),
                                    password: $(form).find('#passwd').val(),
                                },
                                success: function (data, status, resp) {
                                    showLoadingBar({
                                        delay: .5,
                                        pct: 100,
                                        finish: function () {
                                            // Redirect after successful login page (when progress bar reaches 100%)
                                            if (data["result"] == "success") {
                                                var storage = window.localStorage;
                                                storage.setItem("authorization", "Token " + data["token"]);
                                                window.location.hash = '#/app/forms-models-check';
                                                //$('body').removeClass('login-page login-light lockscreen-page');
                                            }
                                            else {
                                                toastr.error(" <strong>"+data["commit"]+"</strong> :)", "认证失败!", opts);
                                                $(form).find('#passwd').select();
                                            }
                                        }
                                    });

                                }
                            });

                        }
                    });

                    // Set Form focus
                    $("form#login .form-group:has(.form-control):first .form-control").focus();
                });
            </script>

            <!-- Errors container -->
            <div class="errors-container">


            </div>

            <!-- Add class "fade-in-effect" for login form effect -->
            <form method="post" role="form" id="login" class="login-form fade-in-effect">

                <div class="login-header">
                    <a href="#/app/dashboard-variant-1" class="logo">
                        <!--<img src="assets/images/logo@2x.png" alt="" width="80" />-->
                        <span>登录</span>
                    </a>

                    <p>请妥善保管好您的账号信息!</p>
                </div>


                <div class="form-group">
                    <label class="control-label" for="username">Email</label>
                    <input type="text" class="form-control input-dark" name="email" id="email" autocomplete="off"/>
                </div>

                <div class="form-group">
                    <label class="control-label" for="passwd">Password</label>
                    <input type="password" class="form-control input-dark" name="passwd" id="passwd"
                           autocomplete="off"/>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-dark  btn-block text-left">
                        <i class="fa-lock"></i>
                        Log In
                    </button>
                </div>

                <div class="login-footer">
                    <a href="">Forgot your password?</a>

                    <!--<div class="info-links">-->
                    <!--<a href="">ToS</a> - -->
                    <!--<a href="">Privacy Policy</a>-->
                    <!--</div>-->

                </div>

            </form>

            <!-- External login -->
            <div class="external-login">
                <!--<a href="" class="facebook">-->
                <!--<i class="fa-facebook"></i>-->
                <!--Facebook Login-->
                <!--</a>-->

                <!--
                <a href="<?php _hash(); ?>" class="twitter">
                    <i class="fa-twitter"></i>
                    Login with Twitter
                </a>

                <a href="<?php _hash(); ?>" class="gplus">
                    <i class="fa-google-plus"></i>
                    Login with Google Plus
                </a>
                 -->
            </div>

        </div>

    </div>

</div>